<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="商户入驻申请" bgColor="transparent" backUrl="/pages/my/index"></c-nav-bar>
		<image class="top_img" src="https://i.ringzle.com/file/20240319/6516bf17ca19483cb98adba73514f738.png"></image>
		<view class="tip">
			<view class="t_title">请先选择商家类型</view>
			<view class="t_text">提交资料申请入驻</view>
		</view>
		<view class="card" @tap="toTurn('商家',12)">
			<image class="c_logo" src="https://i.ringzle.com/file/20240227/86a6465d11a04e6e966d7f81c954c369.png">
			</image>
			<view class="c_texts">
				<text>餐饮美食入驻</text>
				<text>请准备好营业执照、法人身份证及店铺照片，提交资料后将在1-7个工作日内审核</text>
			</view>
		</view>
		<view class="card" @tap="toTurn('酒店民宿',2)">
			<image class="c_logo" src="https://i.ringzle.com/file/20240227/a1074b3244da4217975aa83ab988ab78.png">
			</image>
			<view class="c_texts">
				<text>酒店民宿入驻</text>
				<text>请准备好营业执照、法人身份证及民宿照片，提交资料后将在1-7个工作日内审核</text>
			</view>
		</view>
		<view class="card">
			<image class="c_logo" src="https://i.ringzle.com/file/20240227/86a6465d11a04e6e966d7f81c954c369.png">
			</image>
			<view class="c_texts">
				<text>其他类型</text>
				<text>正在开发中，敬请期待…</text>
			</view>
		</view>

		<view class="btn-btn" @click="toRecord">
			<view class="btn-text">
				<view class="text">
					申请记录
				</view>
				<view class="image">
					<image src="https://i.ringzle.com/file/20240422/78af8eea854349d2b33cb9cd1f1914ae.png" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
			}
		},
		methods: {
			toTurn(name, type) {
				uni.navigateTo({
					url: '/pagesMy/merchantOccupancyApplication/index?name=' + name + '&type=' + type
				})
			},

			toRecord() {
				uni.navigateTo({
					url: '/pagesMy/merchantOccupancyApplication/record'
				})
			}

		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #fff;
		position: relative;

		.top_img {
			width: 100%;
			height: 670rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.tip {
			width: 100%;
			padding: 0 64rpx;
			box-sizing: border-box;
			margin: 148rpx 0 62rpx;
			position: relative;
			z-index: 1;

			.t_title {
				font-size: 48rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.t_text {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 24rpx;
			}
		}

		.card {
			width: calc(100% - 80rpx);
			margin: 40rpx 40rpx 0;
			padding: 59rpx 22rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			z-index: 1;

			.c_logo {
				width: 110rpx;
				height: 110rpx;
			}

			.c_texts {
				width: calc(100% - 110rpx);
				padding-left: 28rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				text {
					font-size: 40rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
					line-height: 40rpx;

					&:last-child {
						font-size: 26rpx;
						font-weight: Regular;
						color: #777777;
						margin-top: 16rpx;
						// line-height: 28rpx;
					}
				}
			}

			.c_yjt {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.btn-btn {

			display: flex;
			margin: 120rpx auto 60rpx;
			border: 1rpx solid #007A69;
			color: #007A69;
			font-size: 30rpx;
			font-weight: Bold;
			width: 210rpx;
			height: 68rpx;
			// line-height: 68rpx;
			border-radius: 50rpx;
			text-align: center;
			align-items: center;

			.btn-text {
				display: flex;
				align-items: center;
				margin: 0 auto;

				.text {
					text-align: center;
				}

				.image {
					width: 24rpx;
					height: 24rpx;
					line-height: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}


		}


	}
</style>